<template>
	<div class="content-outside">
		<div class="content">
			<h4>作品登记申请表
				<span>系统将自动保存填写的信息，可在个人中心下进行修改和删除</span>
			</h4>
			<div class="step_state">
				<div class="step step_01 clear current">
					<div class="step_info">
						<span>1</span>
						<span>作品信息</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_02 clear current">
					<div class="step_border"></div>
					<div class="step_info">
						<span>2</span>
						<span>权利状况</span>
						<span>说明</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_03 clear">
					<div class="step_border"></div>
					<div class="step_info">
						<span>3</span>
						<span>留存样本</span>
					</div>
					<div class="step_border"></div>
				</div>
				<div class="step step_04 clear">
					<div class="step_border"></div>
					<div class="step_info">
						<span>4</span>
						<span>申请人信息</span>
					</div>
				</div>
			</div>
			<div class="hr">
				<p>权利状况说明</p>
			</div>
			<div class="form_box">
				<el-form :model="degree_02" :rules="degree_02_rules" ref="degree_02" label-width="150px" class="demo-degree_02">
					<div class="form_width">
						<h3 class="h3">权利取得方式及说明：</h3>
						<el-form-item label="权利取得方式：" prop="right_obtain_way">
							<el-radio-group v-model="degree_02.right_obtain_way">
								<el-radio v-for="item in right_obtain_way" :label="item.value" :key="item.label">{{ item.label }}</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="说明：" prop="right_obtain_desc">
							<el-input type="textarea" v-model="degree_02.right_obtain_desc"></el-input>
						</el-form-item>

						<el-form-item label="取得方式证明：">
							<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.quanliqudefangshi" :on-success="obtainSuccess" :before-upload="obtainUpload" :limit="1" :on-exceed="obtainExceed" :file-list="fileList.obtain">
								<!-- <span class="ff4949">*</span> -->
								<el-button size="small" type="primary">上传附件</el-button>
								<!-- <span slot="tip" class="el-upload__tip">（请从创作目的、创作过程、作品独创性三方面写，并附申请人签章，标明签章日期）</span> -->
							</el-upload>
						</el-form-item>

						<h3 class="h3">权利归属方式及说明：</h3>
						<el-form-item label="权利归属方式：" prop="resource">
							<el-radio-group v-model="degree_02.right_belong_type">
								<el-radio v-for="item in right_belong_type" :label="item.value" :key="item.label">{{ item.label }}</el-radio>

							</el-radio-group>
						</el-form-item>

						<el-form-item label="说明：" prop="right_belong_desc">
							<el-input type="textarea" v-model="degree_02.right_belong_desc"></el-input>
						</el-form-item>

						<el-form-item label="归属方式证明：" prop="right_belong_pic">
							<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.guishufangshi" :on-success="belongSuccess" :before-upload="belongUpload" :limit="1" :on-exceed="belongExceed" :file-list="fileList.belong">
								<!-- <span class="ff4949">*</span> -->
								<el-button size="small" type="primary">上传附件</el-button>
								<!-- <span slot="tip" class="el-upload__tip">（请从创作目的、创作过程、作品独创性三方面写，并附申请人签章，标明签章日期）</span> -->
							</el-upload>
							<!-- <a href="#" target="_blank">查看样本</a> -->
						</el-form-item>

						<h3 class="h3">权利拥有状况及说明：</h3>
						<el-form-item label="权利拥有状况：" prop="resource">
							<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
							<!-- <div style="margin: 15px 0;"></div> -->
							<el-checkbox-group v-model="degree_02.right_own_part" @change="handleCheckedCitiesChange">
								<!-- <el-checkbox-group v-model="degree_02.right_own_part"> -->
								<!-- <el-checkbox label="1">发明权</el-checkbox>
									<el-checkbox label="2">署名权</el-checkbox>
									<el-checkbox label="3">修改权</el-checkbox>
									<el-checkbox label="4">复制权</el-checkbox>
									<el-checkbox label="5">放映权</el-checkbox>
									<el-checkbox label="6">广播权</el-checkbox>
									<el-checkbox label="7">改编权</el-checkbox>
									<el-checkbox label="8">表演权</el-checkbox>
									<el-checkbox label="9">翻译权</el-checkbox>
									<el-checkbox label="10">发行权</el-checkbox>
									<el-checkbox label="11">出租权</el-checkbox>
									<el-checkbox label="12">展览权</el-checkbox>
									<el-checkbox label="13">汇编权</el-checkbox>
									<el-checkbox label="14">保护作品完整权</el-checkbox>
									<el-checkbox label="15">信息网络传播权</el-checkbox>
									<el-checkbox label="16">其他</el-checkbox> -->

								<!-- <el-checkbox v-for="item in right_own_part" :label="item" :key="item">{{item}}</el-checkbox> -->
								<el-checkbox v-for="item in right_own_part" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>

						<el-form-item label="说明：" prop="right_own_desc">
							<el-input type="textarea" v-model="degree_02.right_own_desc"></el-input>
						</el-form-item>

						<el-form-item label="拥用状况证明：">
							<el-upload class="upload-demo" :action="uploadUrl" :data="fileInfo.yongyouzhuangkuang" :on-success="ownSuccess" :before-upload="ownUpload" :limit="1" :on-exceed="ownExceed" :file-list="fileList.own">
								<!-- <span class="ff4949">*</span> -->
								<el-button size="small" type="primary">上传附件</el-button>
								<!-- <span slot="tip" class="el-upload__tip">（请从创作目的、创作过程、作品独创性三方面写，并附申请人签章，标明签章日期）</span> -->
							</el-upload>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<div class="form_next">
				<el-button type="text" @click="previousStep">返回上一步</el-button>
				<el-button type="primary" @click="updateinfoFn">下一步</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import { getStreamnum, autosubmit, submitfile, front } from "@/api";
import { mapState, mapMutations } from "vuex";

export default {
    data() {
        return {
            copyright_number: null,

            // 上传地址
            uploadUrl: submitfile,
            imageUrl: "",
            fileInfo: {
                quanliqudefangshi: {
                    type: "pic",
                    folder: "quanliqudefangshi"
                },
                guishufangshi: {
                    type: "pic",
                    folder: "guishufangshi"
                },
                yongyouzhuangkuang: {
                    type: "file",
                    folder: "yongyouzhuangkuang"
                }
            },
            fileList: {
                obtain: [], // 上传附件
                belong: [], // 上传附件
                own: [] // 上传附件
            },

            right_obtain_way: [
                {
                    value: 1,
                    label: "原始"
                },
                {
                    value: 2,
                    label: "继承"
                },
                {
                    value: 3,
                    label: "承受"
                },
                {
                    value: 4,
                    label: "其他"
                }
            ],
            right_belong_type: [
                {
                    value: 1,
                    label: "个人作品"
                },
                {
                    value: 2,
                    label: "合法作品"
                },
                {
                    value: 3,
                    label: "法人作品"
                },
                {
                    value: 4,
                    label: "职务作品"
                },
                {
                    value: 5,
                    label: "委托作品"
                }
            ],

            //全选反选
            checkAll: true,
            isIndeterminate: true,
            // right_own_part: ['发明权', '署名权', '修改权', '复制权','放映权','广播权','改编权','表演权','翻译权','发行权','出租权','展览权','汇编权','保护作品完整权','信息网络传播权','其他'],
            // right_own_part: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
            right_own_part: [
                {
                    value: 1,
                    label: "发明权"
                },
                {
                    value: 2,
                    label: "署名权"
                },
                {
                    value: 3,
                    label: "修改权"
                },
                {
                    value: 4,
                    label: "复制权"
                },
                {
                    value: 5,
                    label: "放映权"
                },
                {
                    value: 6,
                    label: "广播权"
                },
                {
                    value: 7,
                    label: "改编权"
                },
                {
                    value: 8,
                    label: "表演权"
                },
                {
                    value: 9,
                    label: "翻译权"
                },
                {
                    value: 10,
                    label: "发行权"
                },
                {
                    value: 11,
                    label: "出租权"
                },
                {
                    value: 12,
                    label: "展览权"
                },
                {
                    value: 13,
                    label: "汇编权"
                },
                {
                    value: 14,
                    label: "保护作品完整权"
                },
                {
                    value: 15,
                    label: "信息网络传播权"
                },
                {
                    value: 16,
                    label: "其他"
                }
            ],

            degree_02: {
                right_obtain_way: "", // 权利去的方式
                right_obtain_desc: "", // 说明
                right_obtain_pic: "", // 取得方式证明
                right_belong_type: "", // 权利归属方式
                right_belong_desc: "", // 说明
                right_belong_pic: "", // 归属方式证明
                right_own_status: "", // 权力拥有状况
                right_own_part: [], // xxxx
                right_own_desc: "", // 说明
                right_own_pic: "" // 拥有状况证明
            },

            degree_02_rules: {
                right_belong_pic: [
                    { required: true, message: "这是必填项或必选项" }
                ]
            }
        };
    },
	computed: {
		...mapState([
			'croUser',
		]),
	},
	methods: {
		...mapMutations([
			'OUT_LOGIN',
		]),
        // 取得方式证明
        obtainSuccess(res, file) {
            if (res.data) {
                this.degree_02.right_obtain_pic = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        obtainUpload(file) {},
        obtainExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 归属方式证明
        belongSuccess(res, file) {
            if (res.data) {
                this.degree_02.right_belong_pic = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        belongUpload(file) {},
        belongExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },
        // 拥有状况证明
        ownSuccess(res, file) {
            if (res.data) {
                this.degree_02.right_own_pic = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        ownUpload(file) {},
        ownExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 全选反选
        handleCheckAllChange(val) {
            this.degree_02.right_own_part = val
                ? [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
                : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.right_own_part.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.right_own_part.length;
        },
        // 获取已提交数据
        frontFn() {
            let para = {
                copyright_number: this.copyright_number,
                user_id: this.croUser.user_id
            };
            front(para).then(data => {
                let res = data.data;
                for (let i in res) {
                    this.degree_02[i] = res[i];
                }
                // this.degree_02 = data.data;
            });
        },
        // 上一步
        previousStep() {
            this.$router.push({
                path: "copyRightStep01",
                query: {
                    copyright_number: this.copyright_number
                }
            });
        },
        // 总提交
        autosubmitFn() {
            this.$refs.degree_02.validate(valid => {
                if (valid) {
                    let para = Object.assign({}, this.degree_02);
                    para.degree = 2;
                    para.user_id = this.croUser.user_id;
                    para.copyright_number = this.copyright_number;
                    // console.log(para);

                    autosubmit(para).then(res => {
                        if (res.data) {
                            this.$router.push({
                                path: "copyRightStep03",
                                query: {
                                    copyright_number: this.copyright_number
                                }
                            });
                        } else if(res.tologin) {
							this.OUT_LOGIN();
							this.$router.push('/login');
						}else {
							this.$message.error(res.msg);
						}
                    });
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted() {
        // this.getStreamnumFn();
        this.copyright_number = this.$route.query.copyright_number;
        this.frontFn();
    }
};
</script>
<style lang="scss" scoped>
.content-outside {
    width: 100%;
    background: #f2f2f2;
    padding: 15px 0;
}
.content {
    width: 1200px;
    margin: 0px auto;
    box-sizing: border-box;
    padding: 15px;
    background: #fff;
    font-size: 14px;
}
.content h4 {
    font-size: 16px;
    // font-weight: normal;
}
.content h4 > span {
    font-size: 12px;
    font-weight: normal;
    padding-left: 25px;
}
/* hr */
.content .hr {
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
    border-top: 1px solid #c6c6c6;
    margin-top: 20px;
    font-size: 17px;
}
.content .hr > p {
    position: relative;
    top: -17px;
    left: 0;
    width: 300px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
}

/* step 提交后 #37629d 填写前 #c6c6c6 */
.step_state {
    height: 90px;
    padding: 35px 0 55px 100px;
}
.step {
    float: left;
}
.step_border {
    display: inline-block;
    background: #c6c6c6;
    width: 90px;
    height: 1px;
    vertical-align: top;
    margin: 0;
    margin-top: 45px;
}
.step_info {
    display: inline-block;
    width: 90px;
    height: 90px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    font-size: 14px;
    color: #999;
    box-sizing: border-box;
    padding-top: 15px;
    margin: 0 15px;
}
.step_info span {
    display: block;
    line-height: 22px;
    text-align: center;
}

.step.current .step_border {
    background: #37629d;
}
.step.current .step_info {
    border: 1px solid #37629d;
    color: #37629d;
}
.step_form_info {
    margin-top: 30px;
    background: #f2f2f2;
    padding: 0 30px 30px 30px;
}

.form_box {
    padding: 15px 15px 30px 15px;
    background: #f2f2f2;
}
.form_box .h3 {
    font-size: 16px;
    font-weight: normal;
    padding: 15px 0 25px 0;
}
.el-checkbox-group .el-checkbox {
    padding: 0px 15px 0px 0;
}
.el-radio-group .el-radio {
    padding-right: 15px;
    line-height: 36px;
}
.el-checkbox + .el-checkbox,
.el-radio + .el-radio {
    margin: 0;
}
.ff4949 {
    color: #ff4949;
    margin-right: 4px;
}
.form_next {
    text-align: center;
    padding: 25px 0;
}

.form_width {
    width: 1000px;
    margin-left: 80px;
}
</style>
